<template>
  <el-dialog title="系统主题" :custom-class="_systemConfig.theme" v-model="show" width="600px" :append-to-body="true"
             :close-on-press-escape="true" :close-on-click-modal="true">
    <div class="styleList">
      <div class="styleList_span" v-for="item in styleList" v-bind:key="item.key"
           :class="item.key === activeKey?'is-active':''" v-on:click="setWindowTheme(item.key)">
        <div class="styleList_span_img">
          <img :src="item.img"/>
        </div>
        <div class="styleList_span_label">{{ item.label }}</div>
        <i class="el-icon-success"></i>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {reactive, watch} from 'vue';

export default {
  mixins: [],
  components: {},
  data() {
    return {
      show: false,
      activeKey: null,
      styleList: [
        {
          label: "默认样式",
          key: "default",
          img: "https://cloudfront.modao.cc/market-template/mt_covers/0/3798/square_cover_1619187894.png"
        },
        {
          label: "VIP样式",
          key: "vip",
          img: "https://cloudfront.modao.cc/market-template/mt_covers/0/333/square_333-Fl7MMtSeXTDni-nUSZUNlsj5U1yF_field_8_1587972972.png"
        },
        {
          label: "白色主题",
          key: "light",
          img: "https://cloudfront.modao.cc/market-template/mt_covers/0/3671/square_cover_1618451362.png"
        },
        {
          label: "iview主题",
          key: "iview",
          img: "https://cloudfront.modao.cc/market-template/mt_covers/0/1804/square_%E8%96%AA%E8%B5%84.png"
        },
      ]
    }
  },
  props: {},
  setup(props, that) {
    // const preferencesConfig = reactive(props.modelValue)
    // // 监听页面尺寸参数
    // watch(preferencesConfig, (newVal) => {
    //   that.emit("update:modelValue", newVal);
    // }, {deep: true})
    // return {preferencesConfig}
  },
  mounted() {
  },
  methods: {
    /**
     * 打开对话框
     */
    async open() {
      this.show = true
    },
    /**
     * 关闭对话框
     */
    close() {
      this.show = false
    },

    setWindowTheme (activeKey) {
      this.activeKey = activeKey
      this.$store.commit("setWindowTheme", this.activeKey);
    }
  },
  watch: {}
}
</script>
<style scoped lang="scss">
.styleList {
  display: flex;

  .styleList_span {
    width: 25%;
    text-align: center;
    margin: 10px;
    position: relative;

    .styleList_span_img {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 5px;
      position: relative;

      img {
        max-width: 100%;
        border-radius: 5px;
      }
    }

    .styleList_span_label {
      height: 30px;
      line-height: 40px;
      font-size: 14px;
    }

    i {
      display: none;
    }

    &.is-active {
      i {
        display: block;
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 30px;
        color: var(--success);
        background: #fff;
        border-radius: 100px;
      }
    }
  }
}
</style>
